<template>
  <van-calendar ref="calendar"
    :value="show"
    :title="label"
    :color="color"
    :confirm-text="confirmText"
    :type="type"
    :min-date="new Date(0)"
    :default-date="[new Date(), new Date()]"
    :allow-same-day="true"
    @select="onSelectDate"
    @open="onOpenCalender"
    @input="onCalendarVisibleChange"
  >
    <template #footer>
      <van-row type="flex">
        <van-button class="van-calendar__confirm" plain hairline type="default"
          size="small" style="width: 70px; margin-right: 10px;"
          @click="onChange()"
        >
          清空
        </van-button>
        <van-button class="van-calendar__confirm" type="primary"
          size="small" style="flex-grow: 1;"
          @click="onChange(currentDate)"
        >
          {{ confirmText }}
        </van-button>
      </van-row>
    </template>
  </van-calendar>
</template>

<script>
const dayjs = require('dayjs');
const customParseFormat = require('dayjs/plugin/customParseFormat');
dayjs.extend(customParseFormat);

export default {
  name: 'popupCalendar',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number, Date, Array]
    },
    label: {
      type: String
    },
    type: {
      type: String,
      default: 'single'
    },
    color: {
      type: String
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    /**
     * YY 两位数的年份
     * YYYY 四位数的年份
     * M 1-12 月份，从 1 开始
     * MM 01-12 月份，两位数
     * MMM Jan-Dec 缩写的月份名称
     * MMMM January-December 完整的月份名称
     * D 1-31 月份里的一天
     * DD 01-31 月份里的一天，两位数
     * H 0-23 小时
     * HH 00-23 小时，两位数
     * h 1-12 小时, 12 小时制
     * hh 01-12 小时, 12 小时制, 两位数
     * m 0-59 分钟
     * mm 00-59 分钟，两位数
     * s 0-59 秒
     * ss 00-59 秒，两位数
     * S 0-9 毫秒，一位数
     * SS 00-99 毫秒，两位数
     * SSS 000-999 毫秒，三位数
     * Z -05:00 UTC 的偏移量
     * ZZ -0500 UTC 的偏移量，两位数
     * A AM / PM 上午 下午 大写
     * a am / pm 上午 下午 小写
     * timestamp 时间戳
     */
    valueFormat: {
      type: String,
      default: 'YYYY-MM-DD'
    }
  },
  data () {
    return {
      currentDate: undefined
    }
  },
  methods: {
    onCalendarVisibleChange (val) {
      if (!val) this.$emit('close');
    },
    onChange (value) {
      function parseValue (value, format) {
        if (value == null) return null;
        if (format === 'timestamp') {
          return value.valueOf();
        } else {
          return value.format(format);
        }
      }
      let temp;
      if (Array.isArray(value)) {
        temp = value.map(item => {
          return parseValue(item, this.valueFormat);
        });
      } else {
        temp = parseValue(value, this.valueFormat);
      }
      this.$emit('input', temp);
      this.$emit('change', temp);
      this.$emit('close');
    },
    onOpenCalender () {
      let date;
      if (Array.isArray(this.day)) {
        if (this.day.length > 0) {
          date = this.day.map(item => {
            return new Date(item.valueOf());
          });
        }
      } else if (this.day != null) {
        date = new Date(this.day.valueOf());
      } else {
        date = new Date();
      }
      this.onSelectDate(date);
      if (this.$refs.calendar) this.$refs.calendar.reset(date);
    },
    onSelectDate (date) {
      if (Array.isArray(date)) {
        this.currentDate = date.map(item => {
          return dayjs(item);
        });
      } else {
        this.currentDate = dayjs(date);
      }
    }
  },
  computed: {
    day () {
      function formatDateValue (value, valueFormat) {
        if (valueFormat === 'timestamp') {
          // 时间戳
          return dayjs(value);
        } else if (typeof value === 'string') {
          return dayjs(value, valueFormat);
        } else {
          return dayjs(value);
        }
      }
      if (this.value == null) return null;
      if (Array.isArray(this.value)) {
        return this.value.map(item => {
          return formatDateValue(item, this.valueFormat);
        });
      } else {
        return formatDateValue(this.value, this.valueFormat);
      }
    }
  },
  watch: {
    day: {
      handler () {
        this.currentDate = this.day;
      },
      immediate: true
    }
  }
}
</script>

<style>
</style>
